<template>
    <div>
        <v-header title="交易详情"/>
        <ul class="Info">
            <li>
                <ul class="Left">
                    <li>订单号：</li>
                    <li>合同日期：</li>
                    <li>订立合同价：</li>
                    <li>商品：</li>
                </ul>
                <ul class="Right">
                    <li>CP1711231825126627</li>
                    <li>08-03 20:37:12</li>
                    <li>46,115.33</li>
                    <li>比特币BTC</li>
                </ul>
            </li>
            <li>
                <ul class="Left">
                    <li>方向：</li>
                    <li>数量：</li>
                    <li>止盈档位：</li>
                    <li>止盈档位：</li>
                    <li>盈亏金额：</li>
                </ul>
                <ul class="Right">
                    <li>买入</li>
                    <li>1</li>
                    <li>46,115.33</li>
                    <li>46,115.33</li>
                    <li>300.00</li>
                </ul>
            </li>
            <li>
                <ul class="Left">
                    <li>平仓时间：</li>
                    <li>平仓价：</li>
                    <li>保证金：</li>
                </ul>
                <ul class="Right">
                    <li>08-03 20:37:12</li>
                    <li>46,115.33</li>
                    <li>300.00</li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>
import vHeader from '../../Common/vHeader';
    export default {
        mounted(){
            // 可以根据订单号进行查询
            this.$toast(this.$route.query.ddh);  
        },
        components: {
            vHeader,
        },
    }
</script>

<style scoped>
.Info{
    display: flex;
    list-style: none;
    flex-direction: column;
}
.Info>li{
    display: flex;
    justify-content: space-around;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #E8E8E8;
}
.Left{
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 50vw;
    color: #aaaaaa;
}
.Right{
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 50vw;
    color: #333;
}
.Left>li, .Right>li{
    line-height: 2rem;
}
</style>